<template>
  <el-dialog title="配置成员" :visible="visible" width="640px" @close="closeHandle">
    <div class="p-20 member-content">
      <div class="title">项目成员名单</div>
      <div class="content">
        <div class="member-item" v-if="dataList.length > 0" v-for="(item,index) in dataList">
          <span>{{item.name}}</span>
          <i class="el-icon-close" @click="deleteItem(index)"></i>
        </div>
        <div v-if="dataList.length == 0" class="empty">暂无成员</div>
      </div>
      <div class="form-bottom">
        <el-input v-model="text" placeholder="输入同事的企业微信名，可一次输入多个，并用英文字符“;”隔开" size="medium" style="width:450px;margin-right:20px" @keyup.13.native="addMember"></el-input>
        <ui-button size="medium" type="blue" icon="el-icon-plus" @click="addMember">添加</ui-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {Dialog, Input} from 'element-ui'
  export default {
    components: {
      [Dialog.name]: Dialog,
      [Input.name]: Input,
    },
    props: ['visible'],
    data () {
      return {
        dataList: [],
        text: ''
      }
    },
    methods: {
      closeHandle() {
        this.$emit('update:visible', false)
      },
      addMember() {
        const member = this.text.split(';');
        console.log(member)
        member.forEach(item => {
          if(item.trim() != ''){
            this.dataList.push({
              name: item
            })
          }
        })
        this.text = ''
      },
      deleteItem(index) {
        console.log(index)
        this.dataList.splice(index, 1)
      }
    }
  }
</script>

<style lang="less">
  .member-content{
    .title{
      font-size: 14px;
      color: #5e5e5e;
      font-weight: 400;
      margin-bottom: 2px;
    }
    .content{
      padding: 10px;
      min-height: 160px;
      background: #fcfcfc;
      box-sizing: border-box;
      position: relative;
      .empty{
        margin-top: 50px;
        color: #999;
        text-align: center;
      }
    }
    .member-item{
      display: inline-block;
      height: 22px;
      color: #8492a6;
      line-height: 24px;
      padding: 0 10px;
      border-radius: 12px;
      margin: 10px 5px;
      border: 1px solid #8492a6;
      .el-icon-close {
        cursor: pointer;
        margin-left: 5px;
      }
    }
  }
 
</style>
